<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Fab</title>
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css">
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <script src="http://cdn.suoluomei.com/common/js2.0/axios/axios.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<style>
    #Vue {
        /*margin: 50px 10%;*/
    }

    .container {
        width: 100%;
    }

    .container .my-swipe {
        margin: 0 auto;
        /* height: 400px; */
        width: 100%;
    }

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        /* text-align: center; */
        width: 100%;
        height: 450px;
        /* height: 100%; */
    }

    .title {
        /*margin: 10px 0;*/
        margin-left: 15px;
        margin-top: 15px;
    }

    .title .tit {
        font-size: 18px;
        color: #333;
    }

    .title .price {
        font-size: 16px;
        font-weight: 700;
        color: red;
    }
</style>

<body>
    <div id="Vue">
        <div class="container">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#333">
                <van-swipe-item v-for="(image, index) in goodsInfo.imgList" :key="index">
                    <van-image :src="image" style="height: 400px;width:100%;" />
                </van-swipe-item>
            </van-swipe>
            <div class="title">
                <div class="tit">
                    <span>{{goodsInfo.materialName}} </span>
                </div>
                <div class="price">
                    ￥{{goodsInfo.price}}
                </div>
            </div>

            <!-- <div>
                <van-button type="primary" block>立即购买</van-button>
            </div> -->

        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#Vue",
        data: {
            id: '',
            active: 0,
            images: [
                'https://img.yzcdn.cn/vant/apple-1.jpg',
                'https://img.yzcdn.cn/vant/apple-2.jpg',
            ],
            goodsInfo: {}
        },
        methods: {
            GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg); //search,查询？后面的参数，并匹配正则
                if (r != null) return unescape(r[2]);
                return null;
            },

            getGoodsDate(id, daoId) {
                var that = this
                $.ajax({
                    "url": "/Material/getGoodsById",
                    "data": "id=" + id + "&daoId=" + daoId,
                    "type": "POST",
                    "dataType": "json",
                    "success": function (json) {
                        if (json.state == 200) {
                            that.goodsInfo = json.data
                        } else {
                            alert(json.message)
                        }
                    }
                })
            }


        },
        created() {

            var gid = this.GetQueryString('id')
            var daoId = this.GetQueryString('daoId')
            this.getGoodsDate(gid,daoId)
            // this.getGoodsDate('1', '6772')

            
        },

    })
</script>

</html>